<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Activiti Form Designer</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" charset="utf-8" src="assets/ueditor-1.4.3/third-party/jquery-1.10.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="assets/ueditor-1.4.3/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="assets/ueditor-1.4.3/ueditor.all.js"></script>
<script type="text/javascript" charset="utf-8" src="assets/ueditor-1.4.3/lang/zh-cn/zh-cn.js"></script>
<!-- 引入表单设计器 -->
<script type="text/javascript" charset="utf-8" src="assets/ueditor-1.4.3/formdesign/leipi.formdesign.v4.js"></script>
</head>
<body>
<form id="form" action="parser" method="post" target="_blank">
<div>
    <script id="editor" type="text/plain" style="width:1000px;height:500px;">
<table data-sort="sortDisabled">
    <tbody>
        <tr class="firstRow">
            <td style="word-break: break-all;" valign="top">
                <span style="font-size: 12px;">文本框<br/></span>
            </td>
            <td valign="top">
                <input orgtype="text" orgwidth="150" orgalign="left" style="text-align: left; width: 150px;" orghide="0" leipiplugins="text" value="" title="文本框" name="leipiNewField" type="text"/>
            </td>
            <td style="word-break: break-all;" valign="top">
                <span style="font-size: 12px;">下拉<br/></span>
            </td>
            <td style="word-break: break-all;" valign="top">
                <span style="font-size: 12px;">{|-</span><label leipiplugins="select"><span style="font-size: 12px;">&nbsp;</span><select orgwidth="150" style="width: 150px;" size="1" leipiplugins="select" title="下拉" name="leipiNewField"><option selected="selected" value="AAA">
                    <span style="font-size: 12px;">AAA</span>
                </option>
                <option value="BBB">
                    <span style="font-size: 12px;">BBB</span>
                </option>
                <option value="CCC">
                    <span style="font-size: 12px;">CCC</span>
                </option></select><span style="font-size: 12px;">&nbsp;</span></label><span style="font-size: 12px;">-|}</span>
            </td>
        </tr>
        <tr>
            <td style="word-break: break-all;" valign="top">
                <span style="font-size: 12px;">单选<br/></span>
            </td>
            <td style="word-break: break-all;" valign="top">
                <span style="font-size: 12px;">{|-</span><label leipiplugins="radios" title="单选" name="leipiNewField"><input name="leipiNewField" value="A" type="radio"/><span style="font-size: 12px;">A&nbsp;</span><input name="leipiNewField" value="B" checked="" type="radio"/><span style="font-size: 12px;">B&nbsp;</span><input name="leipiNewField" value="C" type="radio"/><span style="font-size: 12px;">C&nbsp;</span></label><span style="font-size: 12px;">-|}</span>
            </td>
            <td style="word-break: break-all;" valign="top">
                <span style="font-size: 12px;">复选<br/></span>
            </td>
            <td valign="top">
                <span style="font-size: 12px;">{|-</span><label leipiplugins="checkboxs" title="复选"><input name="leipiNewField" value="1" checked="checked" type="checkbox"/><span style="font-size: 12px;">1&nbsp;</span><input name="leipiNewField" value="2" type="checkbox"/><span style="font-size: 12px;">2&nbsp;</span><input name="leipiNewField" value="3" checked="checked" type="checkbox"/><span style="font-size: 12px;">3&nbsp;</span></label><span style="font-size: 12px;">-|}</span>
            </td>
        </tr>
        <tr>
            <td style="word-break: break-all;" valign="top">
                <span style="font-size: 12px;">时间<br/></span>
            </td>
            <td style="word-break: break-all;" valign="top">
                <input orgwidth="150" style="width: 150px;" orghide="0" orgtype="sys_time" leipiplugins="date" title="时间" value="" name="leipiNewField" type="text"/>
            </td>
            <td style="word-break: break-all;" valign="top">
                <span style="font-size: 12px;">宏<br/></span>
            </td>
            <td style="word-break: break-all;" valign="top">
                <input orgwidth="150" style="width: 150px;" orghide="0" orgtype="sys_time" leipiplugins="macros" title="宏" value="" name="leipiNewField" type="text"/>
            </td>
        </tr>
        <tr>
            <td style="word-break: break-all;" valign="top">
                <span style="font-size: 12px;">多行框<br/></span>
            </td>
            <td colspan="3" rowspan="1" valign="top">
                <textarea title="多行框" name="leipiNewField" leipiplugins="textarea" value="" orgrich="0" orgfontsize="" orgwidth="300" orgheight="80" style="width:300px;height:80px;"></textarea><span style="font-size: 12px;"></span>
            </td>
        </tr>
        <tr>
            <td style="word-break: break-all;" valign="top">
                <span style="font-size: 12px;">列表<br/></span>
            </td>
            <td colspan="3" rowspan="1" valign="top">
                <input type="text" style="width: 300px;" orgcolvalue="`20`" orgcolwidth="100`50`" orgtitle="Col1`Col2`Col3" title="列表控件" readonly="readonly" value="{列表控件}" leipiplugins="listctrl" name="leipiNewField">
            </td>
        </tr>
    </tbody>
</table>
<br />
<table>
    <tbody>
        <tr class="firstRow">
            <td style="word-break: break-all;" valign="top">
                <span style="font-size: 12px;">AAA<br/></span>
            </td>
            <td valign="top">
                <input orgtype="text" orgwidth="150" orgalign="left" style="text-align: left; width: 150px;" orghide="0" data-cell="F1484710292102" leipiplugins="text" value="" title="AAA" name="leipiNewField" type="text"/>
            </td>
            <td style="word-break: break-all;" valign="top">
                <span style="font-size: 12px;">BBB<br/></span>
            </td>
            <td valign="top">
                <input orgtype="text" orgwidth="150" orgalign="left" style="text-align: left; width: 150px;" orghide="0" data-cell="F1484710298430" leipiplugins="text" value="" title="BBB" name="leipiNewField" type="text"/>
            </td>
        </tr>
        <tr>
            <td style="word-break: break-all;" valign="top">
                <span style="font-size: 12px;">CCC<br/></span>
            </td>
            <td valign="top">
                <input data-preview="AVERAGE(AAA,BBB)" data-formula="AVERAGE(F1484710292102,F1484710298430)" fsource="&lt;span class=&amp;quot;formula&amp;quot; title=&amp;quot;AVERAGE(数值1, 数值2, ...)&amp;quot; style=&amp;quot;background-color:#ddd;&amp;quot;&gt;AVERAGE(&lt;b title=&amp;quot;AAA&amp;quot; style=&amp;quot;cursor:pointer;background-color:#ffc;&amp;quot; onmousedown=&amp;quot;if(event.button==2){jQuery(this).remove();formula_exp_preview();}&amp;quot; contenteditable=&amp;quot;false&amp;quot;&gt;F1484710292102&lt;/b&gt;, &lt;b title=&amp;quot;BBB&amp;quot; style=&amp;quot;cursor:pointer;background-color:#ffc;&amp;quot; onmousedown=&amp;quot;if(event.button==2){jQuery(this).remove();formula_exp_preview();}&amp;quot; contenteditable=&amp;quot;false&amp;quot;&gt;F1484710298430&lt;/b&gt;)&lt;/span&gt;" orgtype="text" orgwidth="150" orgalign="left" style="text-align: left; width: 150px;" orghide="0" data-cell="F1484710304069" leipiplugins="text" value="" title="CCC" name="leipiNewField" type="text"/>
            </td>
            <td style="word-break: break-all;" valign="top">
                <span style="font-size: 12px;">DDD<br/></span>
            </td>
            <td valign="top">
                <input data-preview="CONCAT(AAA,BBB)" data-formula="CONCAT(F1484710292102,F1484710298430)" fsource="&lt;span class=&amp;quot;formula&amp;quot; title=&amp;quot;CONCAT(字符串1, 字符串2, ...)&amp;quot; style=&amp;quot;background-color:#ddd;&amp;quot;&gt;CONCAT(&lt;b title=&amp;quot;AAA&amp;quot; style=&amp;quot;cursor:pointer;background-color:#ffc;&amp;quot; onmousedown=&amp;quot;if(event.button==2){jQuery(this).remove();formula_exp_preview();}&amp;quot; contenteditable=&amp;quot;false&amp;quot;&gt;F1484710292102&lt;/b&gt;, &lt;b title=&amp;quot;BBB&amp;quot; style=&amp;quot;cursor:pointer;background-color:#ffc;&amp;quot; onmousedown=&amp;quot;if(event.button==2){jQuery(this).remove();formula_exp_preview();}&amp;quot; contenteditable=&amp;quot;false&amp;quot;&gt;F1484710298430&lt;/b&gt;)&lt;/span&gt;" orgtype="text" orgwidth="150" orgalign="left" style="text-align: left; width: 150px;" orghide="0" data-cell="F1484710308733" leipiplugins="text" value="" title="DDD" name="leipiNewField" type="text"/>
            </td>
        </tr>
    </tbody>
</table>
	</script>
</div>
</form>

<!-- script start-->
<script type="text/javascript">
	var leipiEditor = UE.getEditor("editor", {
		toolleipi : true,// 是否显示，设计器的 toolbars
		textarea : 'content',
		// 这里可以选择自己需要的工具按钮名称
		toolbars : [['fullscreen', 'source', '|', 'undo', 'redo', '|',
		             'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'removeformat', '|',
		             'forecolor', 'backcolor', // 'insertorderedlist', 'insertunorderedlist', '|',
		             'fontfamily', 'fontsize', '|', // 'indent', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',
		             'link', 'unlink', '|', 'horizontal', 'spechars', 'wordimage'],
	    	 		['inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'insertrownext', 'deleterow', 
	    	 		 'insertcol', 'insertcolnext', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', '|',
	    	 		 'edittd', 'edittable', '|']],
		// focus时自动清空初始化时的内容
		// autoClearinitialContent : true,
		// 关闭字数统计
		wordCount : false,
		// 关闭elementPath
		elementPathEnabled : false,
		// 默认的编辑区域高度
		initialFrameHeight : 500,
		// 引入自身css使编辑器兼容你网站css
		// iframeCssUrl:"formdesign/bootstrap/css/bootstrap.css"
		// 关闭自动保存
		enableAutoSave: false
		// 更多其他参数，请参考ueditor.config.js中的配置项
	});
	
	var leipiFormDesign = {
		/* 执行控件 */
		exec : function(method) {
			leipiEditor.execCommand(method);
		},
		// Javascript 解析表单 template 表单设计器里的Html内容 fields 字段总数
		parse_form : function(template, fields) {
			// 正则 radios|checkboxs|select 匹配的边界 |--| 因为当使用 {} 时js报错
			var preg = /(\|-<span(((?!<span).)*leipiplugins=\"(radios|checkboxs|select)\".*?)>(.*?)<\/span>-\||<(img|input|textarea|select).*?(<\/select>|<\/textarea>|\/>))/gi, preg_attr = /(\w+)=\"(.?|.+?)\"/gi, preg_group = /<input.*?\/>/gi;
			if (!fields) {
				fields = 0;
			}
			var template_parse = template, template_data = new Array(), add_fields = new Object(), checkboxs = 0;
			var pno = 0;
			template.replace(preg, function(plugin, p1, p2, p3, p4, p5, p6) {
				var parse_attr = new Array(), attr_arr_all = new Object(), name = '', select_dot = '', is_new = false;
				var p0 = plugin;
				var tag = p6 ? p6 : p4;
				// alert(tag + " \n- t1 - "+p1 +" \n-2- " +p2+" \n-3- " +p3+" \n-4- " +p4+" \n-5- " +p5+" \n-6- " +p6);
				if (tag == 'radios' || tag == 'checkboxs') {
					plugin = p2;
				} else if (tag == 'select') {
					plugin = plugin.replace('|-', '');
					plugin = plugin.replace('-|', '');
				}
				plugin.replace(preg_attr, function(str0, attr, val) {
					if (attr == 'name') {
						if (val == 'leipiNewField') {
							is_new = true;
							fields++;
							val = 'data_' + fields;
						}
						name = val;
					}
					if (tag == 'select' && attr == 'value') {
						if (!attr_arr_all[attr])
							attr_arr_all[attr] = '';
						attr_arr_all[attr] += select_dot + val;
						select_dot = ',';
					} else {
						attr_arr_all[attr] = val;
					}
					var oField = new Object();
					oField[attr] = val;
					parse_attr.push(oField);
				})
				// alert(JSON.stringify(parse_attr));return;
				if (tag == 'checkboxs') {
					// 复选组 多个字段
					plugin = p0;
					plugin = plugin.replace('|-', '');
					plugin = plugin.replace('-|', '');
					var name = 'checkboxs_' + checkboxs;
					attr_arr_all['parse_name'] = name;
					attr_arr_all['name'] = '';
					attr_arr_all['value'] = '';
					attr_arr_all['content'] = '<span leipiplugins="checkboxs"  title="' + attr_arr_all['title'] + '">';
					var dot_name = '', dot_value = '';
					p5.replace(preg_group, function(parse_group) {
						var is_new = false, option = new Object();
						parse_group.replace(preg_attr, function(str0, k, val) {
							if (k == 'name') {
								if (val == 'leipiNewField') {
									is_new = true;
									fields++;
									val = 'data_' + fields;
								}
								attr_arr_all['name'] += dot_name + val;
								dot_name = ',';
							} else if (k == 'value') {
								attr_arr_all['value'] += dot_value + val;
								dot_value = ',';
							}
							option[k] = val;
						});
						if (!attr_arr_all['options']) {
							attr_arr_all['options'] = new Array();
						}
						attr_arr_all['options'].push(option);
						// if(!option['checked']) option['checked'] = '';
						var checked = option['checked'] != undefined ? 'checked="checked"' : '';
						attr_arr_all['content'] += '<input type="checkbox" name="' + option['name'] + '" value="' + option['value'] + '"  ' + checked + '/>' + option['value'] + '&nbsp;';
						if (is_new) {
							var arr = new Object();
							arr['name'] = option['name'];
							arr['leipiplugins'] = attr_arr_all['leipiplugins'];
							add_fields[option['name']] = arr;
						}
					});
					attr_arr_all['content'] += '</span>';
					// parse
					template = template.replace(plugin, attr_arr_all['content']);
					template_parse = template_parse.replace(plugin, '{' + name + '}');
					template_parse = template_parse.replace('{|-', '');
					template_parse = template_parse.replace('-|}', '');
					template_data[pno] = attr_arr_all;
					checkboxs++;
				} else if (name) {
					if (tag == 'radios') {
						// 单选组 一个字段
						plugin = p0;
						plugin = plugin.replace('|-', '');
						plugin = plugin.replace('-|', '');
						attr_arr_all['value'] = '';
						attr_arr_all['content'] = '<span leipiplugins="radios" name="' + attr_arr_all['name'] + '" title="' + attr_arr_all['title'] + '">';
						var dot = '';
						p5.replace(preg_group, function(parse_group) {
							var option = new Object();
							parse_group.replace(preg_attr, function(str0, k, val) {
								if (k == 'value') {
									attr_arr_all['value'] += dot + val;
									dot = ',';
								}
								option[k] = val;
							});
							option['name'] = attr_arr_all['name'];
							if (!attr_arr_all['options']) {
								attr_arr_all['options'] = new Array();
							}
							attr_arr_all['options'].push(option);
							// if(!option['checked']) option['checked'] = '';
							var checked = option['checked'] != undefined ? 'checked="checked"' : '';
							attr_arr_all['content'] += '<input type="radio" name="' + attr_arr_all['name'] + '" value="' + option['value'] + '"  ' + checked + '/>' + option['value'] + '&nbsp;';
						});
						attr_arr_all['content'] += '</span>';
					} else {
						attr_arr_all['content'] = is_new ? plugin.replace(/leipiNewField/, name) : plugin;
					}
					// attr_arr_all['itemid'] = fields;
					// attr_arr_all['tag'] = tag;
					template = template.replace(plugin, attr_arr_all['content']);
					template_parse = template_parse.replace(plugin, '{' + name + '}');
					template_parse = template_parse.replace('{|-', '');
					template_parse = template_parse.replace('-|}', '');
					if (is_new) {
						var arr = new Object();
						arr['name'] = name;
						arr['leipiplugins'] = attr_arr_all['leipiplugins'];
						add_fields[arr['name']] = arr;
					}
					template_data[pno] = attr_arr_all;
				}
				pno++;
			})
			var parse_form = new Object({
				'fields' : fields,// 总字段数
				'template' : template,// 完整html
				'parse' : template_parse,// 控件替换为{data_1}的html
				'data' : template_data,// 控件属性
				'add_fields' : add_fields// 新增控件
			});
			return JSON.stringify(parse_form);
		},
		/* type = save 保存设计 versions 保存版本 close关闭 */
		fnCheckForm : function(type) {
			if (leipiEditor.queryCommandState('source'))
				leipiEditor.execCommand('source');// 切换到编辑模式才提交，否则有bug
			if (leipiEditor.hasContents()) {
				leipiEditor.sync();/* 同步内容 */
				alert("你点击了保存,这里可以异步提交，请自行处理....");
				return false;
				
				// --------------以下仅参考-----------------------------------------------------------------------------------------------------
				var type_value = '', formid = 0, fields = $("#fields").val(), formeditor = '';
				if (typeof type !== 'undefined') {
					type_value = type;
				}
				// 获取表单设计器里的内容
				formeditor = leipiEditor.getContent();
				// 解析表单设计器控件
				var parse_form = this.parse_form(formeditor, fields);
				// alert(parse_form);
				// 异步提交数据
				$.ajax({
					type : 'POST',
					url : '/index.php?s=/index/parse.html',
					// dataType : 'json',
					data : {
						'type' : type_value,
						'formid' : formid,
						'parse_form' : parse_form
					},
					success : function(data) {
						if (confirm('查看js解析后，提交到服务器的数据，请临时允许弹窗')) {
							win_parse = window.open('', '', 'width=800,height=600');
							// 这里临时查看，所以替换一下，实际情况下不需要替换
							data = data.replace(/<\/+textarea/, '&lt;textarea');
							win_parse.document.write('<textarea style="width:100%;height:100%">' + data + '</textarea>');
							win_parse.focus();
						}
						/*if (data.success == 1) {
							alert('保存成功');
							$('#submitbtn').button('reset');
						} else {
							alert('保存失败！');
						}*/
					}
				});
			} else {
				alert('表单内容不能为空！')
				$('#submitbtn').button('reset');
				return false;
			}
		},
		// 预览表单
		fnReview : function() {
			if (leipiEditor.queryCommandState('source')) {
				// 切换到编辑模式才提交，否则部分浏览器有bug
				leipiEditor.execCommand('source');
			}
			if (leipiEditor.hasContents()) {
				// 同步内容
				leipiEditor.sync();
				// 提交预览的form到新页面
				$('#form').submit();
				return false;
			} else {
				alert('表单内容不能为空！');
				return false;
			}
		}
	};
</script>
<!-- script end -->
</body>
</html>